// 配置路由文件

// 导入 vue-router 模块
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入 pinia
import {
  useUserStore // 用户数据状态管理
} from '@/store_pinia'

// 使用路有懒加载导入页面组件
const Home = () => import('@/views/Home/HomeIndex.vue') // 首页页面
const Login = () => import('@/views/Login/LoginIndex.vue') // 登录页面
const Address = () => import('@/views/Address/AddressIndex.vue') // 购物地址页面
const Cart = () => import('@/views/Cart/CartIndex.vue') // 购物车页面
const Category = () => import('@/views/Category/CategoryIndex.vue') // 商品分类页面
const CategoryDetail = () => import('@/views/CategoryDetail/CategoryDetailIndex.vue') // 商品分类详情页面
const Comment = () => import('@/views/Comment/CommentIndex.vue') // 商品评论页面
const Error = () => import('@/views/Error/ErrorIndex.vue') // 错误页面
const Order = () => import('@/views/Order/OrderIndex.vue') // 订单页面
const OrderConfirm = () => import('@/views/OrderConfirm/OrderConfirmIndex.vue') // 订单确认页面
const OrderDetail = () => import('@/views/OrderDetail/OrderDetailIndex.vue') // 订单详情页面
const Pay = () => import('@/views/Pay/PayIndex.vue') // 支付页面
const Product = () => import('@/views/Product/ProductIndex.vue') // 商品详情页面
const Recommend = () => import('@/views/Recommend/RecommendIndex.vue') // 商品推荐页面
const Search = () => import('@/views/Search/SearchIndex.vue') // 商品搜索页面
const User = () => import('@/views/User/UserIndex.vue') // 用户页面

// 路由规则配置
const routes = [
  // 首页路由页面
  {
    path: '/',
    name: 'home',
    component: Home
  },
  // 登录路由页面
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  // 购物地址路由页面
  {
    path: '/address',
    name: 'address',
    component: Address,
    props: true,
    meta: { requireAuth: true }
  },
  // 购物车路由页面
  {
    path: '/cart',
    name: 'cart',
    component: Cart,
    meta: { requireAuth: true }
  },
  // 商品分类路由页面
  {
    path: '/category',
    name: 'category',
    component: Category
  },
  // 商品分类详情路由页面
  {
    path: '/category-detail/:categoryId',
    name: 'category-detail',
    component: CategoryDetail,
    props: true
  },
  // 商品评论路由页面
  {
    path: '/comment/:productId',
    name: 'comment',
    component: Comment,
    props: true
  },
  // 订单路由页面
  {
    path: '/order',
    name: 'order',
    component: Order,
    meta: { requireAuth: true }
  },
  // 订单确认路由页面
  {
    path: '/order-confirm',
    name: 'order-confirm',
    component: OrderConfirm,
    props: true,
    meta: { requireAuth: true }
  },
  // 订单详情路由页面
  {
    path: '/order-detail/:orderId',
    name: 'order-detail',
    component: OrderDetail,
    props: true,
    meta: { requireAuth: true }
  },
  // 支付路由页面
  {
    path: '/pay',
    name: 'pay',
    component: Pay,
    meta: { requireAuth: true }
  },
  // 商品详情路由页面
  {
    path: '/product/:productId',
    name: 'product',
    component: Product,
    props: true
  },
  // 商品推荐路由页面
  {
    path: '/recommend',
    name: 'recommend',
    component: Recommend
  },
  // 商品推荐路由页面
  {
    path: '/search',
    name: 'search',
    component: Search
  },
  // 用户路由页面
  {
    path: '/user',
    name: 'user',
    component: User,
    meta: { requireAuth: true }
  },
  // 错误路由页面
  {
    path: '/:pathMatch(.*)*/:errorMessage',
    name: 'error',
    component: Error,
    props: true
  }
]

// 创建 vue-router 实例
const router = createRouter({
  history: createWebHashHistory(), // 设置为 hash 模式
  routes // 路由规则配置
})

// 导航守卫
router.beforeEach((to, from) => {
  const userStore = useUserStore() // 实例化容器

  // 路由鉴权校验
  if (!to.meta.requireAuth) {
    // 如果要访问的路由页面没有校验标识符
    return true
  } else {
    // 如果访问的页面包含校验标识符，那么就需要判断当前用户是否登录
    if (!userStore.user || !window.localStorage.getItem('USER_TOKEN')) {
      // 跳转到登录页面
      return {
        name: 'login',
        query: {
          // 用来记录本来要去的路径，用来当用户重新登录时，返回原本要访问的页面
          redirect: to.fullPath
        }
      }
    }
  }
})

export default router // 导出
